<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>网上购票</title>
<link rel="stylesheet" href="resources/css/frozen.css">
<link rel="stylesheet" href="resources/css/main.css">
<style>
.ui-header .ui-btn-left {
	background-color: #8cdaf6;
	height: 44px;
	color: #fff;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 10px;
}
.ui-header .ui-btn-right {
	background-color: #8cdaf6;
	height: 44px;
	color: #fff;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 10px;
}
#order-list li {
	margin-left: 0;
}
.bus-time {
	color: #14b6e7;
    font-size: 14px;
	font-weight: bold;
}
.order-list-start {
    color: #ff8c05;
	font-weight: bold;
	padding: 0 5px 0 0;
}
.order-list-end {
    color: #065fb9;
	font-weight: bold;
	padding: 0 5px;
	margin-left: 10px;
}
.order-list-price {
    color: #ff4e02;
	font-weight: bold;
}
.order-list-password {
    color: #ff4e02;
	font-weight: bold;
}
.order-list-password {
    color: #ff4e02;
	font-weight: bold;
}
.empty-text {
    padding: 20px 0;
}
</style>
<script src="resources/lib/zepto.min.js"></script>
<script src="resources/js/frozen.js"></script>
<script src="resources/js/config.js"></script>
<script src="resources/js/main.js"></script>

</head>
<body ontouchstart="">
	<header class="ui-header ui-header-positive ui-border-b">
		<i class="ui-icon-return" onclick="history.back()"></i>
		<h1>订单查询</h1>
	</header>
	<footer class="ui-footer ui-footer-btn">
		<ul id="footer" class="ui-tiled ui-border-t">
			<li data-href="index.html" class="ui-border-r">
				<div>查询购票</div>
			</li>
			<li data-href="order.html" class="ui-border-r">
				<div>订单查询</div>
			</li>
			<li data-href="member.html">
				<div>会员中心</div>
			</li>
		</ul>
	</footer>
	<section class="ui-container">
		<div id="order-tab" class="ui-tab">
			<ul class="ui-tab-nav ui-border-b">
				<li class="current">已支付订单</li>
				<li>未支付订单</li>
				<li>作废订单</li>
			</ul>
			<ul class="ui-tab-content" style="width: 300%">
				<li style="height: auto;">
					<ul id="complete-order-list" class="ui-list ui-list-pure ui-list-link ui-border-b">

					</ul>
					<div class="ui-btn-wrap">
						<button id="btn-complete-load-more" class="ui-btn-lg" style="display:none;">加载更多</button>
					</div>
					<div id="complete-order-empty-text" class="ui-flex ui-flex-pack-center" style="display:none;">
						<div class="empty-text">没有已支付的订单</div>
					</div>
					<div class="ui-whitespace">
						<h1 class="ui-txt-warning">温馨提示：</h1>
						<p class="ui-txt-justify">取票密码将以短信形式发送给您。</p>
					</div>
				</li>
				<li style="height: 0px;">
					<ul id="uncomplete-order-list" class="ui-list ui-list-pure ui-list-link ui-border-b">
					</ul>
					<div class="ui-btn-wrap">
						<button id="btn-uncomplete-load-more" class="ui-btn-lg" style="display:none;">加载更多</button>
					</div>
					<div id="uncomplete-order-empty-text" class="ui-flex ui-flex-pack-center" style="display:none;">
						<div class="empty-text">没有未支付的订单</div>
					</div>
					<div class="ui-whitespace">
						<h1 class="ui-txt-warning">温馨提示：</h1>
						<p class="ui-txt-justify">请在订单提交后15分钟内完成支付，否则订单将自动作废。</p>
					</div>
				</li>
				<li style="height: 0px;">
					<ul id="cancel-order-list" class="ui-list ui-list-pure ui-border-b">
					</ul>
					<div class="ui-btn-wrap">
						<button id="btn-cancel-load-more" class="ui-btn-lg" style="display:none;">加载更多</button>
					</div>
					<div id="cancel-order-empty-text" class="ui-flex ui-flex-pack-center" style="display:none;">
						<div class="empty-text">没有作废的订单</div>
					</div>
				</li>
			</ul>
		</div>
	</section>

	<div id="loading" class="ui-loading-block hide">
		<div class="ui-loading-cnt">
			<i class="ui-loading-bright"></i>
			<p>努力加载中...</p>
		</div>
	</div>
<script>
var uncompleteTabTaped = cancelTabTaped = false;
var completCurrentPage = uncompleteCurrentPage = cancelCurrentPage = 0
var pageSize = 20;

// 检查登录状态
checkLogin();

(function (){
	/* -------------------- 根据localStorage中的值，初始化界面 -------------------- */
	
	// 未支付订单查询结果列表点击事件
	$(document).on("tap", "#uncomplete-order-list li", function(){
		sessionStorage.payOrderId = $(this).attr("order-id");
		location.href = "payOrder.html";
	});
	
	// 已支付订单查询结果列表点击事件
	$(document).on("tap", "#complete-order-list li", function(){
		sessionStorage.orderId = $(this).attr("order-id");
		sessionStorage.orderType = 1;
		location.href = "orderDetail.html";
	});
	
	// 作废订单查询结果列表点击事件
	$(document).on("tap", "#cancel-order-list li", function(){
		sessionStorage.orderId = $(this).attr("order-id");
		sessionStorage.orderType = 3;
		location.href = "orderDetail.html";
	});
	
	// 加载更多已支付订单按钮点击事件
	$("#btn-complete-load-more").tap(function(){
		completCurrentPage++;
		queryCompletOrder();
	});
	
	// 加载已支付订单
	queryCompletOrder();
	
	// 加载更多未支付订单按钮点击事件
	$("#btn-uncomplete-load-more").tap(function(){
		uncompleteCurrentPage++;
		queryUncompleteOrder();
	});
	
	// 加载更多已作废订单按钮点击事件
	$("#btn-cancel-load-more").tap(function(){
		cancelCurrentPage++;
		queryCancelOrder();
	});
	
	// tab初始化
	var tab = new fz.Scroll('#order-tab', {
        role: 'tab'
    });
	
	// tab点击后，加载对应订单（用户点击时加载，并且只加载一次）
	tab.on('beforeScrollStart', function(currentTab) {
		if(currentTab==1 && !uncompleteTabTaped) {
			uncompleteTabTaped = true;
			queryUncompleteOrder();
		}
		
		if(currentTab==2 && !cancelTabTaped) {
			cancelTabTaped = true;
			queryCancelOrder();
		}
    });
	
	// 底部主菜单初始化
	initFooter("#footer");
})();

// 查询已支付订单
function queryCompletOrder() {
	showLoading("#loading");
	ajax({
		url: appConfig.baseUrl + "/BusTicketOrder.go",
		data: {
			method: "showOrderByCust",
			memberId: sessionStorage.memberId,
			status: 1,
			start: completCurrentPage * pageSize,
			limit: pageSize
		},
		failMessage: "已支付订单查询失败，请重试",
		success: function(data) {
			hideLoading("#loading");
			if(!!data) {
				showCompletOrder(data);
			}
		}
	});
}

// 显示已支付订单
function showCompletOrder(data) {
	for(var i=0; i<data.rows.length; i++) {
		var record = data.rows[i];
		
		var totalQuantity = 0;
		if(!!record.FullTicketCount) {
			totalQuantity += parseInt(record.FullTicketCount)
		}
		if(!!record.HalfTicketCount) {
			totalQuantity += parseInt(record.HalfTicketCount)
		}
		
		$("#complete-order-list").append(
			"<li class='ui-border-t' order-id='" + record.OrderId + "'" +
				">" +
				"<h4>" +
					"乘车日期：<span class='bus-time'>" + record.BusTime.substring(0, 10) + "</span>" +
					"，发车时间：<span class='bus-time'>" + record.BusTime.substring(11, 16) + "</span>" +
				"</h4>" +
				"<h4>" +
					"<span>" +
						"线路：" + record.Name +
					"</span>" +
					"<span>" +
						"，车次：" + record.BusId +
					"</span>" +
				"</h4>" +
				"<h4>" +
					"<span>" +
						"<span class='order-list-start'>始</span>" + record.SellStationName + "" +
						"<span class='order-list-end'>终</span>" + record.EndStationName +
					"</span>" +
				"</h4>" +
				"<h4>" +
					"总人数：<span class='order-list-price'>" + totalQuantity + "</span>" +
					"，总金额：<span class='order-list-price'>" + record.TotalPrice + "</span>" +
				"</h4>" +
			"</li>"
		);
	}
	
	// 记录为空
	if(data.totalCount==0) {
		$("#complete-order-empty-text").show();
	}
	
	// 是否显示加载更多按钮
	if((completCurrentPage+1)*pageSize<data.totalCount) {
		$("#btn-complete-load-more").show();
	} else {
		$("#btn-complete-load-more").hide();
	}
}

// 查询未支付订单
function queryUncompleteOrder() {
	showLoading("#loading");
	ajax({
		url: appConfig.baseUrl + "/BusTicketOrder.go",
		data: {
			method: "showOrderByCust",
			memberId: sessionStorage.memberId,
			status: 0,
			start: uncompleteCurrentPage * pageSize,
			limit: pageSize
		},
		failMessage: "未支付订单查询失败，请重试",
		success: function(data) {
			hideLoading("#loading");
			if(!!data) {
				showUncompleteOrder(data);
			}
		}
	});
}

// 显示未支付订单
function showUncompleteOrder(data) {
	for(var i=0; i<data.rows.length; i++) {
		var record = data.rows[i];
		
		var totalQuantity = 0;
		if(!!record.FullTicketCount) {
			totalQuantity += parseInt(record.FullTicketCount)
		}
		if(!!record.HalfTicketCount) {
			totalQuantity += parseInt(record.HalfTicketCount)
		}
		
		$("#uncomplete-order-list").append(
			"<li class='ui-border-t' order-id='" + record.OrderId + "'" +
				">" +
				"<h4>" +
					"乘车日期：<span class='bus-time'>" + record.BusTime.substring(0, 10) + "</span>" +
					"，发车时间：<span class='bus-time'>" + record.BusTime.substring(11, 16) + "</span>" +
				"</h4>" +
				"<h4>" +
					"<span>" +
						"线路：" + record.Name +
					"</span>" +
					"<span>" +
						"，车次：" + record.BusId +
					"</span>" +
				"</h4>" +
				"<h4>" +
					"<span>" +
						"<span class='order-list-start'>始</span>" + record.SellStationName + "" +
						"<span class='order-list-end'>终</span>" + record.EndStationName +
					"</span>" +
				"</h4>" +
				"<h4>" +
					"总人数：<span class='order-list-price'>" + totalQuantity + "</span>" +
					"，总金额：<span class='order-list-price'>" + record.TotalPrice + "</span>" +
				"</h4>" +
			"</li>"
		);
	}
	
	// 记录为空
	if(data.totalCount==0) {
		$("#uncomplete-order-empty-text").show();
	}
	
	// 是否显示加载更多按钮
	if((uncompleteCurrentPage+1)*pageSize<data.totalCount) {
		$("#btn-uncomplete-load-more").show();
	} else {
		$("#btn-uncomplete-load-more").hide();
	}
}

// 查询已作废订单
function queryCancelOrder() {
	showLoading("#loading");
	ajax({
		url: appConfig.baseUrl + "/BusTicketOrder.go",
		data: {
			method: "showOrderByCust",
			memberId: sessionStorage.memberId,
			status: 3,
			start: cancelCurrentPage * pageSize,
			limit: pageSize
		},
		failMessage: "已作废订单查询失败，请重试",
		success: function(data) {
			hideLoading("#loading");
			if(!!data) {
				showCancelOrder(data);
			}
		}
	});
}

// 显示已作废订单
function showCancelOrder(data) {
	for(var i=0; i<data.rows.length; i++) {
		var record = data.rows[i];
		
		var totalQuantity = 0;
		if(!!record.FullTicketCount) {
			totalQuantity += parseInt(record.FullTicketCount)
		}
		if(!!record.HalfTicketCount) {
			totalQuantity += parseInt(record.HalfTicketCount)
		}
		
		$("#cancel-order-list").append(
			"<li class='ui-border-t' order-id='" + record.OrderId + "'" +
				">" +
				"<h4>" +
					"乘车日期：<span class='bus-time'>" + record.BusTime.substring(0, 10) + "</span>" +
					"，发车时间：<span class='bus-time'>" + record.BusTime.substring(11, 16) + "</span>" +
				"</h4>" +
				"<h4>" +
					"<span>" +
						"线路：" + record.Name +
					"</span>" +
					"<span>" +
						"，车次：" + record.BusId +
					"</span>" +
				"</h4>" +
				"<h4>" +
					"<span>" +
						"<span class='order-list-start'>始</span>" + record.SellStationName + "" +
						"<span class='order-list-end'>终</span>" + record.EndStationName +
					"</span>" +
				"</h4>" +
				"<h4>" +
					"总人数：<span class='order-list-price'>" + totalQuantity + "</span>" +
					"，总金额：<span class='order-list-price'>" + record.TotalPrice + "</span>" +
				"</h4>" +
			"</li>"
		);
	}
	
	// 记录为空
	if(data.totalCount==0) {
		$("#cancel-order-empty-text").show();
	}
	
	// 是否显示加载更多按钮
	if((cancelCurrentPage+1)*pageSize<data.totalCount) {
		$("#btn-cancel-load-more").show();
	} else {
		$("#btn-cancel-load-more").hide();
	}
}
</script>
</body>
</html>